<template>
  <div class="container-fluid">
    <div class="row">
      <div class="left col-md-6 col-6 col-sm-6">
        <img :src="require('@/assets/images/PropertyPageImages/4.jpeg')"
             class="picture">
      </div>
      <div class="right col-md-6 col-6 col-sm-6">
        <img :src="require('@/assets/images/PropertyPageImages/5.jpeg')"
             class="picture">
        <img :src="require('@/assets/images/PropertyPageImages/8.jpeg')"
             class="picture">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FunctionPicture',
  data () {
    return {
      index: 1
    }
  }
}
</script>
<style scoped>
.left-child {
  position: relative;
  height: 50px;
}
.container-fluid {
  width: 100%;
  overflow-x: hidden;
}
.left {
  /* height: 165px; */
  width: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
  margin-right: 0;
  /* background-image: url("../../assets/images/PropertyPageImages/5.jpeg"); */
}
.right {
  /* height: 165px; */
  width: 50%;
  text-align: center;
  padding-left: 0;
  margin-left: 0;
  /* background-image: url("../../assets/images/PropertyPageImages/5.jpeg"); */
}
.left img {
  width: 100%;
  height: 100%;
}
.right img {
  width: 100%;
  height: 50%;
}
/* 响应式 */
@media (min-width: 270px) and (max-width: 575.98px) {
  .left,
  .right {
    height: 165px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .left,
  .right {
    height: 265px;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  .left,
  .right {
    height: 365px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .left,
  .right {
    height: 365px;
  }
}
@media (min-width: 1200px) {
  .left,
  .right {
    height: 365px;
  }
}
</style>
